<template>
    <div class="returnRecordLayout">
        <ul v-for="(recordItem,index) in returnRecordData" :key="index">
            <li>
                <div class="tableTitle">
                    <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                    <div class="tableText" v-if="recordItem.callbackCount == '一'">首次回访</div>
                    <div class="tableText" v-if="recordItem.callbackCount !== '一'">{{recordItem.callbackCount}}次回访</div>
                </div>
            </li>
            <li><label>客户名称：</label>{{recordItem.callbackRecord.customerName}}</li>
            <li><label>回访人：</label>{{recordItem.callbackRecord.callbackName}}</li>
            <li><label>回访时间：</label>{{recordItem.callbackRecord.createTime}}</li>
            <li>
              <label>回访方式：</label>
              <span v-if='recordItem.callbackRecord.callbackWay == 1'>电话</span>
              <span v-if='recordItem.callbackRecord.callbackWay == 2'>微信</span>
              <span v-if='recordItem.callbackRecord.callbackWay == 3'>短信</span>
            </li>
            <li><label>回访事由：</label>{{recordItem.callbackRecord.callbackReason}}</li>
            <li v-if="isBuy == 0"><label>购买用途：</label>{{recordItem.callbackRecord.purchasePurpose}}</li>
            <li v-if="isBuy == 0"><label>未购原因：</label>{{recordItem.callbackRecord.unpurchasedReason}}</li>
            <li v-if="isBuy == 0"><label>客户预算：</label>{{recordItem.budget}}</li>
            <li><label>回访详情：</label>{{recordItem.callbackRecord.callbackDescription}}</li>
            <li>
              <label style="float:left">附件：</label>
              <h4 style="display:inline-block">
                <div v-for="(urlItem,n) in recordItem.callbackRecord.systemFile" v-show="urlItem" :key="n" @click="showFile(index,n)">
                  <!-- <div v-show="showName"> {{urlItem.originalName}}</div> -->
                  <div v-if="urlItem && isImg(urlItem)">{{urlItem.originalName | hideMiddle}}</div>
                  <a v-if="urlItem && urlItem.url && !isImg(urlItem)" :href="urlItem.url">{{urlItem.originalName | hideMiddle}}</a>
                  <!-- <span v-if="urlItem.originalName.split('.')[1] == 'png' || 'jpg' || 'bmp' ">图片来啦</span> -->
                  <div v-if="urlItem && urlItem.url">
                    <img :src="urlItem.url" v-if="isImg(urlItem) && indexRecord == index && indexn == n" @click="showStatus(index,n)" />
                  </div>
                </div>
              </h4>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'returnRecord',
    data(){
        return{
            urlStr:''
        }
    },
    props:{
        returnRecordData:{
            type:Array
        },
        isBuy:{
            type:Number
        },
        indexRecord:{
            type:Number
        },
        indexn:{
            type:Number
        },
        showImg:{
            type:Boolean
        },
        showName:{
          type:Boolean
        }
       
    },
    created(){
        console.log('传过来没有啊',this.isBuy)
    },
    methods:{
        showFile(index,n){
            this.$emit("showFile",index,n)
        },
        showStatus(index,n){
          this.$emit('showStatus',index,n)
        },
        isImg (item) {
          let regExp = /\.(png|jpe?g|gif|svg)(\?.*)?$/
          return regExp.test(item.url)
        }
    },
    filters:{
      hideMiddle(val){
        console.log('过滤的值',val);
        var urlLast = val.split('.')[0];
        let regExp = /\.(png|jpe?g|gif|svg)(\?.*)?$/
        regExp.test(val)
        return urlLast
      }
    }
}
</script>

<style scoped>
.returnRecordLayout{
  background-color:#fff;
  height: auto;
}
.returnRecordLayout ul{
  padding:0 24px
}
.returnRecordLayout ul li{
  padding-bottom:18px;
  font-size:14px
}
.returnRecordLayout ul li label{
  color:#888
}
.returnRecordLayout ul li span{
  color:#222
}
.returnRecordLayout ul li .tableTitle{
  padding:0
}
.returnRecordLayout ul li:first-child{
  padding:0;
}
 .returnRecordLayout ul li:not(:first-child) {
   padding-left:14px;
 }
 .returnRecordLayout ul li label h4 em:hover{
   cursor: pointer;
 }
.returnRecordLayout ul li h4 em{
  color:#7e6b5a;
  display:block;
  margin-bottom: 10px;
  height: 20px;
}
</style>



